<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>网易云音乐</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/header.css">
  <link rel="stylesheet" type="text/css" href="css/init.css">
  <link rel="stylesheet" type="text/css" href="css/gedan.css">
<body>
 <nav class="navbar navbar-inverse top" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            

          </button>
          <div class="logo clear">
          <img src="images/logo.png" class="fl">
          <div class="navbar-brand" href="#">网易云音乐</div></div>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">发现音乐</a></li>
                <li><a href="demo.html">我的音乐</a></li>
                <li><a href="#">朋友</a></li>
                <li><a href="#">商城</a></li>
                <li><a href="#">音乐人</a></li>
                <li><a href="#">下载客户端</a></li>
            </ul>
          <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="音乐/电台/用户" border-radius="50%">
              </div>
                <button type="submit" class="btn btn-default">搜索</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">视频投稿</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">登录 <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="login.html">手机号登录</a></li>
                <li><a href="wechat.html">微信登录</a></li>
                <li><a href="#">QQ登录</a></li>
                 <li><a href="#">新浪微博登录</a></li>
                <li><a href="#">网易邮箱账号登录</a></li>
            
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div>
    </nav>
  <ul class="nav nav-pills toplist">
       <li class=""><a  href="class.html">推荐</a> </li>
       <li><a href="anchor station.html">排行榜</a></li>
       <li><a href="" class="activ">歌单</a></li>
         <li><a href="">主播电台</a></li>
      <li><a href="">歌手</a></li>
      <li><a href="xindie.html">新碟上架</a></li>
</ul>

 
    <script src="js/jq.js"></script>  
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

        $('.nav-tabs a').click(function(e){
          e.preventDefault();
          $(this).tab('show');
        });

    </script>

 
    <script src="js/jq.js"></script>  
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

        $('.nav-tabs a').click(function(e){
          e.preventDefault();
          $(this).tab('show');
        });

    </script>
     <div class="title">
      <span class="q1">全部</span>
      <button class="b1">热门</button>
      <button class="b2">最新</button>

      <select class="form-control">
         <option>选择分类</option>
         <option>欧美</option>
         <option>华语</option>
         <option>韩语</option>
         <option>日语</option>
         <option>粤语</option>
         <option>小语种</option>
      </select>
      <div class="h1">

      </div>


     <!-- 图片部分 -->
      <ul class="u1">
       <li> <img src="images/18510278255627044.jpg"><a href="">承蒙你出现 够我喜欢好多年</a></li>
       <li> <img src="images/18612532836990988.jpg"><a href="">喜欢一个人 就算捂住嘴巴也会从眼睛里流露</a></li>
       <li><img src="images/109951163029539649.jpg"><a href="">酸的甜 泡菜滋味的斑斓恋爱日常</a></li>
       <li><img src="images/109951163029472577.jpg"><a href="">秋日暖阳下的罪人男生</a></li>
       <li><img src="images/109951163027468903.jpg"><a href="">歌里藏着的秘密是我对你多年的爱恋</a></li>
       <li><img src="images/109951163027264242.jpg"><a href="">翻唱简史：日本三百首</a></li>
       <li><img src="images/109951163026788047.jpg"><a href="">幻梦终醒 本无不散之筵席</a></li>
       <li><img src="images/109951163026476965.jpg"><a href="">萦绕心间的温暖细腻</a></li>
       <li><img src="images/109951163025047328.jpg"><a href="">倾听自然 雨声轻弹</a></li>
       <li><img src="images/109951163010173574.jpg"><a href="">我可以忘记一切 却忘不了你的出现</a></li>
       <li><img src="images/109951163011046040.jpg"><a href="">关于我和你的故事 到此为止</a></li>
       <li><img src="images/109951163017680528.jpg"><a href="">蓦然回首 不觉泪以千行</a></li>
       <li><img src="images/109951163018188002.jpg"><a href="">我爱你以旧如初 不曾改变</a></li>
       <li><img src="images/109951163019209688.jpg"><a href="">承蒙你出现 够我喜欢好多年</a></li>
       <li><img src="images/109951163022157465.jpg"><a href="">喜欢一个人 就算捂住嘴巴也会从眼睛里流露</a></li>
       <li><img src="images/109951163022926005.jpg"><a href="">歌里藏着的秘密是我对你多年的爱恋</a></li>
       <li><img src="images/109951163023970954.jpg"><a href="">我可以忘记一切 却忘不了你的出现</a></li>
       <li><img src="images/109951163024862695.jpg"><a href="">关于我和你的故事 到此为止</a></li>
       <li><img src="images/109951163003990470.jpg"><a href="">秋日暖阳下的罪人男生</a></li>
       <li><img src="images/109951163001141157.jpg"><a href="">酸的甜 泡菜滋味的斑斓恋爱日常</a></li>
       <li><img src="images/109951162957561591.jpg"><a href="">翻唱简史：日本三百首</a></li>
       <li><img src="images/19240353974756098.jpg"><a href="">永远心仪</a></li>
       <li><img src="images/19221662277102979.jpg"><a href="">吟游诗人与异国风情</a></li>
       <li><img src="images/19208468137600761.jpg"><a href="">那些在你酩酊大醉后嘶吼出来的心事</a></li>
       <li> <img src="images/19197473021328780.jpg"><a href="">百首治愈良药</a></li>
       <li> <img src="images/19186477905024835.jpg"><a href="">想拥有你眼中的繁星点点</a></li>
       <li><img src="images/19135900370155200.jpg"><a href="">心如大海 从此美丽</a></li>
       <li><img src="images/19073228207315710.jpg"><a href="">人间四时有好景</a></li>
     </ul>
      
      
 </div>
 <!-- 底端 -->
 <div class="down">

    <ul>
      <li><a href="">关于网易</a></li>
      <li class="line">|</li>
      <li><a href="">客户服务</a></li>
      <li class="line">|</li>
      <li><a href="">服务条款</a></li>
      <li class="line">|</li>
      <li><a href="">网站导航</a></li>
      <li class="line">|</li>
      <li><a href="">意见反馈</a></li>
     </ul>
     
     <div class="right">
       <img src="images/p1.png">
       
        <img src="images/p2.png">
       
        <img src="images/p3.png">
     
     </div>

    </div>

 

</body>
</html>
